<template>
  <div id="app" @scroll="scroll">
    <div class="top">
      <div class="Location" :style="{background:'	rgb(0,255,0.3,'+topAlp+')'}">
        <div class="lef">
          <i></i>
          <a href="#">弓箭坊40号4号楼</a>
          <span></span>
        </div>

        <div class="righ" :class="{'show-sl':shoSl}">
          <span class="span1">
            <a href="#"></a>
          </span>
          <span class="span2">
            <a href="#"></a>
          </span>
        </div>
      </div>
      <div class="Textbox">
        <input type="text" id value="搜索附近的商家、商品" />
      </div>
    </div>
    <div class="conten">
      <div class="picture">
        <img src="/uploads/Textbox.gif" />
      </div>
      <div class="commodity">
        <swiper :options="options">
          <swiper-slide>
            <div class="commodity-bar" v-for="(im,index) in menus" :key="index">
              <img :src="$baseImgUrl+'/uploads/'+im.img" alt />
              <a href>{{im.title}}</a>
            </div>
          </swiper-slide>
          <swiper-slide>
            <div class="commodity-bar" v-for="(im,index) in menus" :key="index">
              <img :src="$baseImgUrl+'/uploads/'+im.img" alt />
              <a href>{{im.title}}</a>
            </div>
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
        <div class="headlines">
          <img src="/uploads/tt.png" />
          <a href="#" class="sy">今日食谱</a>
          <span>秋日元气食谱，10分钟快手菜</span>
        </div>
      </div>
      <div class="rotation-char">
        <swiper :options="swiperOption">
          <swiper-slide v-for="(im,index) in imgs" :key="index">
            <img :src="$baseImgUrl+'/uploads/'+im.img" alt />
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
      </div>
      <div class="discount">
        <p>
          <span>优惠专区</span>
        </p>
        <div class="discount-tb">
          <span>
            <img src="/uploads/tdtt.png" alt />
          </span>
          <span>
            <img src="/uploads/data.png" alt />
          </span>
        </div>
        <div class="discount-tb1">
          <span class="discount-tb11">
            <a href="#">满79减18</a>
            <span>爆品5折起</span>
            <img src="uploads/qjf.png" alt />
          </span>
          <span class="discount-tb11">
            <a href>满49减20</a>
            <span>29元起免运</span>
            <img src="uploads/ytg.png" alt />
          </span>
          <span class="discount-tb11">
            <a href>满79减20</a>
            <span>洗护68减20</span>
            <img src="uploads/mf.png" alt />
          </span>
          <span class="discount-tb11">
            <a href>蜜桔1元</a>
            <span>同享49减20</span>
            <img src="uploads/sg.png" alt />
          </span>
        </div>
      </div>
      <div class="limited-time">
        <div class="limited">
          <span class="lef">限时抢购</span>
          <span class="rig">
            <a href>更多</a>
            <img src="/uploads/y.png" alt />
          </span>
        </div>
        <div class="limited-top1">
          <div class="limited-top" v-for="(im,index) in xstp" :key="index">
            <b>
              <img :src="$baseImgUrl+'/uploads/'+im.jg4" alt />
            </b>
            <img :src="$baseImgUrl+'/uploads/'+im.img" alt />
            <i class="i">{{im.title1}}</i>
            <div class="limited-topp">
              <a href="#">{{im.title}}</a>
              <p>
                <span class="tp1">{{im.jg1}}</span>
                <br />
                <span class="tp2">{{im.jg2}}</span>
                <img :src="$baseImgUrl+'/uploads/'+im.jg3" alt />
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="scbj">
        <div class="scbj-1">
          <img src="/uploads/bjsc.jpg" alt />
        </div>
        <div class="scbj-2">
          <img src="/uploads/dphw.jpg" alt />
        </div>
      </div>
      <div class="fjdd">
        <div class="fjdp">
          <p>附近店铺</p>
        </div>
        <div class="hepx">
          <span class="zonghe">综合排序</span>
          <span>销量</span>
          <span>距离</span>
          <div class="hepx1">
            <span>筛选</span>
            <img src="/uploads/xbq.png" alt />
          </div>
        </div>
        <div class="myf">
          <span>减免运费</span>
          <span>叠加红包</span>
          <span>首单优惠</span>
          <span>满减优惠</span>
        </div>
        <div class="dj" v-infinite-scroll="getDmtb">
          <div class="sangjia" v-for="(im,index) in dmtb" :key="index">
            <div class="lef">
              <img :src="$baseImgUrl+'/uploads/'+im.img" alt />
            </div>
            <div class="righ">
              <div class="biaoti">
                <span>{{im.title}}</span>
              </div>
              <div class="wb">
                <div class="wb1">
                  <span class="wd11">
                    <img src="/uploads/xxx.png" alt />
                  </span>
                  <span class="wd12">
                    <img src="/uploads/xxx.png" alt />
                  </span>
                  <span class="wd13">
                    <img src="/uploads/xxx.png" alt />
                  </span>
                  <span class="wd14">
                    <img src="/uploads/xxx.png" alt />
                  </span>
                </div>
                <div class="wb2">{{im.title1}}</div>
                <div class="wb3">月售3千+</div>
                <div class="wb4">
                  <span class="wb41">{{im.title2}}</span>
                  <span class="wb42">{{im.title3}}</span>
                </div>
              </div>
              <div class="wbs">
                <div class="wbs1">
                  <span class="wbs11">{{im.title4}}</span>
                  <span class="wbs12">{{im.title5}}</span>
                </div>
                <div class="wbs2">达达专送</div>
              </div>
              <div class="wbb">
                <div class="wbb1">
                  <span class="wbb11">已领15元券</span>
                  <span>领70元券</span>
                  <span>领30元券</span>
                  <span>领20元券</span>
                  <a></a>
                </div>
                <div class="wbb2">
                  <span class="wbb21">返礼</span>
                  <span class="wbb22">{{im.title6}}</span>
                </div>
                <div class="wbb3">
                  <i></i>
                  <span>{{im.title7}}</span>
                  <a></a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <a>
        <i class="ii1"></i>
        <span>首页</span>
      </a>
      <a>
        <i class="ii2"></i>
        <span>发现</span>
      </a>
      <a>
        <i class="ii3"></i>
        <span>购物车</span>
      </a>
      <a>
        <i class="ii4"></i>
        <span>订单</span>
      </a>
      <a>
        <i class="ii5"></i>
        <span>我的</span>
      </a>
    </div>
  </div>
</template>
<script>
import { log } from "util";
export default {
  data() {
    return {
      options1: {
        spaceBetween: 30,
        centeredSlides: true
      },
      options: {
        spaceBetween: 30,
        centeredSlides: true
      },
      swiperOption: {
        spaceBetween: 30,
        centeredSlides: true,
        autoplay: {
          delay: 2500,
          disableOnInteraction: false
        },
        pagination: {
          el: ".swiper-pagination",
          clickable: true
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        }
      },
      dmtb: [],
      imgs: [],
      menus: [],
      xstp: [],
      shoSl: true,
      topAlp: 0
    };
  },

  created() {
    this.getMenus();
    this.getImgs();
    this.getXstp();
    this.getDmtb();
  },
  methods: {
    getDmtb() {
      this.$api.getDmtb(result => {
        // this.dmtb = result.data.data;
        this.dmtb = [...this.dmtb,...result.data.data];
      });
    },
    getXstp() {
      this.$api.getXstp(result => {
        this.xstp = result.data.data;
      });
    },
    getImgs() {
      this.$api.getImgs(result => {
        this.imgs = result.data.data;
      });
    },
    getMenus() {
      this.$api.getMenus(result => {
        this.menus = result.data.data;
      });
    },
    scroll() {
      let top = event.target.scrollTop;

      if (top >= 44) {
        top = 44;
      }
      this.shoSl = top > 10;
      this.topAlp = (1 / 44) * top;
    }
  }
};
</script>
<style  lang="scss" scoped>
#app {
  overflow-y: auto;
  height: 100vh;
  .top {
    width: 100vw;
    height: 93px;
    background: url("/uploads/bj1.jpg");
    text-align: center;
    z-index: 1000;
    .Textbox {
      width: 355px;
      height: 34px;
      line-height: 34px;
      // border: 1px solid red;
      border-radius: 15px;
      background: #fff;
      position: relative;
      top: 44px;
      left: 8px;
      input {
        height: 20px;
        border: none;
        padding: 0;
      }
    }

    .Location {
      z-index: 100px;
      position: fixed;
      width: 100vw;
      height: 44px;
      // border: 1px solid red;
      background: lawngreen;
      .show-sl {
        right: 0;
      }

      div {
        transition: 0.5s;
        width: 60px;
        height: 44px;

        // border: 1px solid red;
        float: right;
        position: relative;
        right: -30px;
        .span1 {
          width: 28px;
          height: 44px;
          line-height: 44px;
          // border: 1px solid red;
          display: inline-block;
          position: absolute;
          left: 0;
          top: 0px;
          a {
            width: 20px;
            height: 20px;
            // border: 1px solid red;
            display: inline-block;
            background: url("/uploads/lt.png");

            background-size: 100% 100%;
          }
        }
        .span2 {
          width: 28px;
          height: 44px;
          line-height: 44px;
          // border: 1px solid red;
          display: inline-block;
          position: absolute;
          right: 0;
          top: 0px;
          a {
            width: 20px;
            height: 20px;
            // border: 1px solid red;
            display: inline-block;
            background: url("/uploads/ss.png");
            background-size: 100% 100%;
          }
        }
      }

      .lef {
        width: 220px;
        height: 44px;
        // border: 1px solid red;
        display: inline-block;
        float: left;
        span {
          width: 24px;
          height: 24px;
          display: inline-block;
          // border: 1px solid red;
          vertical-align: middle;
          background: url("/uploads/x.png");
          background-size: 100% 100%;
        }

        a {
          font-size: 18px;
          line-height: 44px;
          color: #fff;
          display: inline-block;
        }
        i {
          width: 14px;
          height: 18px;
          margin-right: 8px;
          line-height: 44px;
          vertical-align: middle;
          // border: 1px solid red;
          display: inline-block;
          background: url("/uploads/magess.png");
          background-size: 100% 100%;
        }
      }
    }
  }
  .conten {
    width: 100vw;
    height: 100vh;
    background: #f6f6f6;

    .fjdd {
      width: 100vw;
      height: 100vh;
      // border: 1px solid red;
      margin-top: 10px;
      background: #fff;
      .dj {
        width: 100vw;
        height: 800px;
        // border: 1px solid red;
        .sangjia {
          width: 100vw;
          height: 152px;
          margin-bottom: 20px;
          // border: 1px solid red;
          position: relative;
          .righ {
            width: 285px;
            height: 152px;
            // border: 1px solid red;
            display: inline-block;
            position: absolute;
            right: 0px;
            .wbb {
              width: 285px;
              height: 60px;
              // border: 1px solid red;
              margin-top: 8px;
              .wbb3 {
                height: 20px;
                // border: 1px solid red;
                overflow: hidden;
                position: relative;
                a {
                  display: inline-block;
                  width: 8px;
                  height: 8px;
                  color: #666;
                  // border: 1px solid red;
                  background: url("/uploads/xiabq.png");
                  background-size: 100% 100%;
                  position: absolute;
                  top: 4px;
                  right: 10px;
                }
                span {
                  height: 20px;
                  font-size: 12px;
                  display: inline-block;
                  margin-left: 5px;
                  position: absolute;
                  top: 3px;
                }
                i {
                  width: 15px;
                  height: 15px;
                  display: inline-block;

                  background: url("/uploads/lalal.png");
                  background-size: 100% 100%;
                }
              }
              .wbb2 {
                height: 20px;
                font-size: 13px;
                // border: 1px solid red;
                overflow: hidden;
                .wbb22 {
                  font-size: 10px;
                }
                .wbb21 {
                  width: 40px;
                  height: 20px;
                  // border: 1px solid red;
                  color: rgb(255, 255, 255);
                  background: rgb(255, 87, 87);
                  font-size: 10px;
                }
              }
              .wbb1 {
                height: 20px;
                font-size: 13px;
                position: relative;
                .wbb11 {
                  margin-left: 0px;
                }
                a {
                  display: inline-block;
                  width: 8px;
                  height: 8px;
                  color: #666;
                  // border: 1px solid red;
                  background: url("/uploads/xiabq.png");
                  background-size: 100% 100%;
                  position: absolute;
                  top: 4px;
                  right: 10px;
                }
                span {
                  margin-left: 8px;
                  margin-top: 5px;
                  color: rgb(255, 87, 87);
                  border-color: rgb(255, 188, 188);
                  background-color: rgb(255, 255, 255);
                  border: 1px solid #ff5757;
                }
              }
            }
            .wbs {
              width: 285px;
              height: 16px;
              line-height: 16px;
              // border: 1px solid gold;
              margin-top: 10px;
              position: relative;
              .wbs1 {
                width: 200px;
                height: 16px;
                // border: 1px solid red;
                display: inline-block;
                .wbs11 {
                  width: 40px;
                  height: 13px;
                  font-size: 14px;
                  line-height: 13px;
                  // border: 1px solid red;
                }
                .wbs12 {
                  width: 100px;
                  height: 13px;
                  font-size: 14px;
                  line-height: 13px;
                  // border: 1px solid red;
                  margin-left: 10px;
                }
              }
              .wbs2 {
                width: 56px;
                height: 16px;
                color: rgb(76, 156, 255);
                font-size: 10px;
                border: 1px solid rgb(76, 156, 255);
                display: inline-block;
                float: right;
              }
            }
            .wb {
              width: 285px;
              height: 16px;
              // border: 1px solid forestgreen;
              margin-top: 10px;
              position: relative;

              .wb1 {
                width: 50px;
                height: 16px;
                overflow: hidden;
                line-height: 16px;
                // border: 1px solid red;
                display: inline-block;
                .wd14 {
                  width: 10px;
                  height: 10px;
                  overflow: hidden;
                  background-color: transparent;
                  position: relative;
                  top: 0;
                  img {
                    position: absolute;
                    width: 50px;
                    height: 10px;
                    top: 0px;
                    left: 30px;
                  }
                }
                .wd13 {
                  width: 10px;
                  height: 10px;
                  overflow: hidden;
                  background-color: transparent;
                  position: relative;
                  top: 0;
                  img {
                    position: absolute;
                    width: 50px;
                    height: 10px;
                    top: 0px;
                    left: 20px;
                  }
                }
                .wd12 {
                  width: 10px;
                  height: 10px;
                  overflow: hidden;
                  background-color: transparent;
                  position: relative;
                  top: 0;
                  img {
                    position: absolute;
                    width: 50px;
                    height: 10px;
                    top: 0px;
                    left: 10px;
                  }
                }

                .wd11 {
                  width: 10px;
                  height: 10px;
                  overflow: hidden;
                  background-color: transparent;
                  position: relative;
                  top: 0;
                  img {
                    position: absolute;
                    width: 50px;
                    height: 10px;
                    top: 0px;
                    left: 0px;
                  }
                }
              }
              .wb2 {
                width: 20px;
                height: 10px;
                line-height: 10px;
                color: #ffa14e;
                font-size: 10px;
                // border: 1px solid red;
                display: inline-block;
                margin-left: 5px;
                position: absolute;
                top: 3px;
                left: 50px;
              }
              .wb3 {
                width: 52px;
                height: 10px;
                font-size: 10px;
                line-height: 10px;
                // border: 1px solid red;
                display: inline-block;
                margin-left: 5px;
                position: absolute;
                top: 3px;
                left: 80px;
              }
              .wb4 {
                width: 130px;
                height: 16px;
                // border: 1px solid red;
                display: inline-block;
                position: absolute;
                top: 0px;
                right: 0;
                .wb41 {
                  width: 60;
                  height: 16px;
                  font-size: 13px;
                  // border: 1px solid red;
                  position: absolute;
                  right: 70px;
                }
                .wb42 {
                  width: 60px;
                  height: 16px;
                  font-size: 13px;
                  // border: 1px solid red;
                  position: absolute;
                  right: 0;
                }
              }
            }
            .biaoti {
              width: 285px;
              height: 20px;
              // border: 1px solid red;
            }
          }
          .lef {
            width: 66px;
            height: 152px;
            // border: 1px solid red;
            display: inline-block;
            position: absolute;
            left: 8px;
            img {
              width: 66px;
              height: 66px;
              margin-top: 10px;
              // border: 1px solid red;
              display: inline-block;
            }
          }
        }
      }
      .myf {
        width: 100vw;
        height: 44px;
        line-height: 44px;
        margin-top: 45px;
        // border: 1px solid red;
        span {
          width: 80px;
          height: 32px;
          text-align: center;
          line-height: 32px;
          // border: 1px solid red;
          display: inline-block;
          background: #f8f8f8;
          margin-left: 8px;
        }
      }
      .hepx {
        width: 100vw;
        height: 45px;
        // border: 1px solid red;
        // margin-top: 45px;
        line-height: 45px;

        .hepx1 {
          width: 81px;
          height: 44px;
          // border: 1px solid red;
          display: inline-block;
          text-align: center;
          float: right;
          position: relative;
          img {
            width: 15px;
            height: 15px;
            color: #666;
            display: inline-block;
            // border: 1px solid red;
            // vertical-align: middle;
            position: absolute;
            top: 14px;
            left: 47px;
          }
        }
        span {
          width: 81px;
          height: 45px;
          // border: 1px solid red;
          margin-right: 25px;
        }
        .zonghe {
          color: rgb(71, 179, 79);
          margin-left: 10px;
        }
      }
      .fjdp {
        width: 365px;
        height: 46px;
        line-height: 46px;
        font-size: 20px;
        margin-left: 10px;
        font-weight: bold;
        float: left;
        // border: 1px solid red;
        p {
          height: 46px;
          margin-top: 0px;
        }
      }
    }
    .scbj {
      width: 100vw;
      height: 221px;
      // border: 1px solid red;
      .scbj-2 {
        width: 355px;
        height: 101px;
        // border: 1px solid red;
        margin: 8px;
        border-radius: 10px;
        overflow: hidden;
        img {
          display: inline-block;
          width: 355px;
          height: 101px;
        }
      }
      .scbj-1 {
        width: 355px;
        height: 101px;
        // border: 1px solid red;
        margin: 8px;
        border-radius: 10px;
        overflow: hidden;
        img {
          display: inline-block;
          width: 355px;
          height: 101px;
        }
      }
    }
    .limited-time {
      width: 100vw;
      height: 250px;
      margin-top: 10px;
      // border: 1px solid red;
      background: #fff;
      border-radius: 20px;
      .limited-top1 {
        width: 100vw;
        height: 185px;
        // border: 1px solid red;
        background-color: #fff;
        white-space: nowrap;
        overflow-x: scroll;
        // padding-top: 10px;
      }
      .limited-top {
        display: inline-block;
        width: 105px;
        height: 185px;
        // border: 1px solid red;
        margin-left: 5px;
        font-size: 12px;
        text-align: center;
        overflow: hidden;
        position: relative;
        b {
          position: absolute;
          top: 0px;
          left: 0;
          width: 24px;
          height: 24px;
          img {
            width: 24px;
            height: 24px;
          }
        }
        .i {
          width: 40px;
          height: 10px;
          line-height: 10px;
          color: #fff;
          background: red;
          display: inline-block;
          // border: 1px solid red;
          position: absolute;
          top: 80px;
          left: 0px;
        }
        .limited-topp {
          margin-top: -14px;
          p {
            width: 105px;
            height: 40px;
            // border: 1px solid #000;
            img {
              width: 26px;
              height: 26px;
              float: right;
              margin-top: -10px;
            }
            .tp1 {
              width: 20px;
              height: 15px;
              font-size: 13px;
              color: red;
              float: left;
            }
            .tp2 {
              margin-top: 5px;
              float: left;
              text-decoration-line: line-through;
            }
          }
          a {
            width: 105px;
            height: 32px;
            color: #666;
            -webkit-line-clamp: 2;
            overflow: hidden;
            -webkit-box-orient: vertical;
            white-space: normal;
            text-overflow: ellipsis;
            margin-top: 10px;
            display: block;
            text-decoration: none;
          }
        }

        img {
          width: 105px;
          height: 105px;
        }
      }
      .limited {
        width: 100vw;
        height: 39px;
        // border: 1px solid red;
        margin-top: 10px;
        position: relative;
        .rig {
          font-size: 15px;
          position: absolute;
          right: 0;
          top: 8px;
          a {
            color: #666;
            text-decoration: none;
          }
          img {
            height: 15px;
            vertical-align: middle;
          }
        }
        .lef {
          font-size: 20px;
          height: 39px;
          line-height: 39px;
          font-weight: bold;
          position: absolute;
          left: 0;
        }
      }
    }
    .discount {
      width: 100vw;
      height: 333px;
      // border: 1px solid red;
      border-radius: 10px;
      background: #fff;
      .discount-tb1 {
        width: 100vw;
        height: 135px;
        // border: 1px solid red;
        display: flex;
        justify-content: space-between;
        .discount-tb11 {
          width: 86px;
          height: 120px;
          margin-left: 4px;
          display: block;
          // border: 1px solid red;
          background: #f6f6f6;
          img {
            width: 60px;
            height: 60px;
            margin: 10px;
            display: block;
          }
          span {
            display: block;
            text-align: center;
          }
          a {
            text-align: center;
            color: red;
            display: block;
          }
        }
      }
      .discount-tb {
        width: 100vw;
        height: 139px;
        // border: 1px solid red;
        span {
          width: 173px;
          height: 129px;
          margin-left: 8px;
          display: inline-block;
          border: 1px solid hotpink;
          img {
            width: 173px;
            height: 129px;
          }
        }
      }
      p {
        margin-top: 0;
        height: 39px;
        line-height: 39px;
        // border: 1px solid red;
        span {
          width: 80px;
          height: 24px;
          font-size: 20px;
          font-weight: bold;
        }
      }
    }
    .rotation-char {
      width: 100vw;
      height: 120px;
      margin-top: 10px;
      // border: 1px solid red;
      background: #f6f6f6;
      img {
        width: 355px;
        height: 100px;
        margin-left: 8px;
        margin-top: 10px;
        border-radius: 10px;
      }
    }

    .commodity {
      width: 100vw;
      height: 224px;
      background: #fff;
      display: flex;
      flex-wrap: wrap;
      align-content: center;
      justify-content: center;
      z-index: 10;
      .headlines {
        width: 100vw;
        height: 20px;
        border-radius: 10px;
        line-height: 20px;
        margin-top: 30px;
        // border: 1px solid red;
        span {
          color: rgb(102, 102, 102);
        }
        .sy {
          color: #666;
          font-weight: bold;
          margin-right: 5px;
        }
        img {
          width: 40px;
          height: 18px;
          margin: 0 10px;
          vertical-align: middle;
        }
      }

      .commodity-bar {
        display: inline-block;
        width: 75px;
        height: 65px;
        // border: 1px solid red;
        margin-left: 10px;
        text-align: center;
        a {
          color: #999;
          font-size: 16px;
          text-decoration: none;
        }

        img {
          width: 40px;
          height: 40px;
          display: block;
          margin-left: 18px;
        }
      }
    }
    .picture {
      width: 100vw;
      height: 115px;

      img {
        width: 100vw;
        height: 115px;
        display: inline-block;
      }
    }
  }
  .bottom {
    // z-index: 100px;
    width: 100vw;
    height: 50px;
    background: #f6f6f6;
    // border: 1px solid red;
    position: absolute;
    bottom: 0;
    a {
      display: inline-block;
      width: 70px;
      height: 50px;
      // border: 1px solid red;
      // text-align: center;
      position: relative;
      margin-left: 2px;
      span {
        width: 24px;
        height: 20px;
        font-size: 10px;
        line-height: 25px;
        // border: 1px solid red;
        display: inline-block;
        position: absolute;
        left: 20px;
        bottom: 0;
      }
      .ii1 {
        background-position: center -50px;
      }
      .ii2 {
        background-position: center -599px;
      }
      .ii3 {
        background-position: center -100px;
      }
      .ii4 {
        background-position: center -200px;
      }
      .ii5 {
        background-position: center -300px;
      }

      i {
        width: 24px;
        height: 30px;
        color: #000;
        // border: 1px solid red;
        display: block;
        background: url("/uploads/a.png") 0 10px;
        background-size: 100% 100%;
        background-size: 24px auto;
        position: absolute;
        left: 20px;
      }
    }
  }
}
</style>
<style lang="scss">
body {
  padding: 0px;
  margin: 0px;
}
</style>
